GORAGOD.com

freelance, web developer, web designer, hosting, domain name

กราฟแท่งแนวนอน ด้วย CSS

กราฟแท่งแนวนอน แบบง่ายๆ ไม่ต้องพึ่ง class หรืออะไรพิเศษ

<style type="text/css">
td.h {
width:200px;
font-weight:bold;
}
/* กรอบของกราฟแท่ง */
div.graph {
border:1px solid #666666;
background-color:#ffffff;
width:200px;
text-align:center;
position:relative;
}
/* กรอบสีของกราฟ */
div.graph span.bar {
position:absolute;
left:0;
}
/* ข้อความภายในกราฟ */
.text {
float:none;
margin:0 auto;
position:relative;
}
</style>

<table>
<?
  $members = 50; //จำนวนทั้งหมด
  $amount = 26; //จำนวนของข้อมูล
  $percent = intval( ( $amount * 100 ) / $members ); //คำนวณเป็นเปอร์เซนต์
  echo "<tr><td class=\"h\">แถบเปอร์เซนต์</td><td><div class=\"graph\"><span class=\"bar\" style=\"width:".( $percent * 2 )."px;background-color:#00ccff\">&nbsp;</span><p class=\"text\">$amount คน $percent %</p></div></td></tr> ";
?>
</table>

ตัวอย่าง
0SHAREFacebookLINE it!
^